<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 父组件 -->
  <div class="box">
    <!-- 静态传值，就是传递一个固定的值，不需要使用 v-bind -->
    <!-- <hello-world age='18'></hello-world> -->
    
    <!-- 动态传值 -->
    <!-- 如果是想把父组件 data 中的数据传递给子组件，需要使用 v-bind 方式进行传参 -->
    <hello-world :myage='age'></hello-world>
  </div>

  <script src="./scripts/vue.js"></script>
  <script>

    // 声明子组件
    Vue.component('hello-world', {
      // 子组件想接收父组件传递的数据，需要使用 props 属性
      // 1. props 值是一个数组
      // 2. 接收的值，需要使用引号进行包裹
      props: ['myage'],
      data: function () {
        return {
          name: 'Tom'
        }
      },
      // 接收的数据，和 data 中的数据一样使用
      template: `
        <div>
          <p>{{ name }}</p>
          <p>{{ age }}</p>
        </div>
      `
    })

    // Vue 实例本身就是一个组件（父组件）
    var vm = new Vue({
      el: '.box',
      data: {
        age: 3
      }
    })
  </script>
</body>

</html>